<template>
  <el-main>
    <el-button type="primary" style="margin-bottom:20px" @click="addUser">创建员工账号</el-button>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="username" align="center" label="姓名">
          <template slot-scope="scope">
            <div :style="{'color' :scope.row.admin  ? 'red' : ''}">{{scope.row.username}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="联系方式">
          <template slot-scope="scope">
            <div :style="{'color' :scope.row.admin  ? 'red' : ''}">{{scope.row.mobile}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="login" align="center" label="登录账号">
          <template slot-scope="scope">
            <div :style="{'color' :scope.row.admin  ? 'red' : ''}">{{scope.row.login}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="position" align="center" label="职位">
          <template slot-scope="scope">
            <div :style="{'color' :scope.row.admin  ? 'red' : ''}">{{scope.row.position}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="state" align="center" label="全局权限">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.is_queue" @change="updataQueue(scope.row.id)" active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="state" align="center" label="是否禁用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" @change="updataState(scope.row.id)" active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" class="editText" @click="exitUser(scope.row)">修改</el-button>
            <el-button type="text" class="deletText" @click="passUser(scope.row.id)">重置密码
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <el-dialog :title="updateFormType ? '修改信息' : '创建员工账号'" :visible.sync="dialogupdate" :close-on-click-modal="false">
      <el-form :model="updateForm" :rules="rules" ref="ruleForm">
        <el-form-item label="联系人姓名" label-width="120px" prop="username">
          <el-input v-model="updateForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" label-width="120px" prop="mobile">
          <el-input v-model="updateForm.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="职位" label-width="120px" prop="position">
          <el-input v-model="updateForm.position" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="120px" prop="email">
          <el-input v-model="updateForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="是否为管理员" label-width="120px">
          <template slot-scope="scope">
            <el-select v-model="updateForm.is_news_admin" placeholder="请选择">
              <el-option v-for="item in optionsAdmin" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-form-item> -->
        <el-form-item label="登录账号" label-width="120px" prop="login">
          <template slot-scope="scope">
            <el-input v-model="updateForm.login" autocomplete="off"></el-input>
            <span v-if="!updateFormType" class="password_span">初始账号默认密码为：A+手机号码，可在创建成功后重新修改密码。</span>
          </template>
        </el-form-item>
        <!-- <el-form-item label="账号名称" label-width="120px">
          <el-input v-model="updateForm.company" autocomplete="off"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm') ">取 消</el-button>
        <el-button type="primary" @click="updateUserInfo('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="dialogResetwrod" @close="passwordClose">
      <el-form :model="ResetwrodForm">
        <el-form-item label="旧密码" label-width="120px">
          <el-input v-model="ResetwrodForm.password_old" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" label-width="120px">
          <el-input v-model="ResetwrodForm.password_new" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="120px">
          <el-input v-model="ResetwrodForm.password_new_two" autocomplete="off" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passwordClose">取 消</el-button>
        <el-button type="primary" @click="passWord">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="创建员工账号" :visible.sync="dialogResetwrod" @close="passwordClose">
      <el-form :model="ResetwrodForm">
        <el-form-item label="旧密码" label-width="120px">
          <el-input v-model="ResetwrodForm.password_old" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" label-width="120px">
          <el-input v-model="ResetwrodForm.password_new" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="120px">
          <el-input v-model="ResetwrodForm.password_new_two" autocomplete="off" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passwordClose">取 消</el-button>
        <el-button type="primary" @click="passWord">确 定</el-button>
      </div>
    </el-dialog>
  </el-main>
</template>

<script>
import { getuserList, passWord, userState, createUser, updateUserInfo, newsinfo, queuestate } from '@/api/newuser'
export default {
  components: {
  },
  data() {
    var validatorMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入联系方式'));
      }
      //判断value是否为手机号
      if (!(/^1[3456789]\d{9}$/.test(value))) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    }
    var validatorEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入邮箱'));
      }
      //判断value是否为邮箱
      if (!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/).test(value)) {
        callback(new Error('请输入正确的邮箱'));
      } else {
        callback();
      }
    }
    return {
      rules: {
        username: [
          {
            required: true, message: '请输入联系人姓名', trigger: 'blur',
          }
        ],
        mobile: [
          {
            required: true,
            trigger: 'blur',
            validator: validatorMobile
          }
        ],
        position: [
          { required: true, message: '请输入职位', trigger: 'blur' }
        ],
        email: [
          { required: true, validator: validatorEmail, trigger: 'blur' }
        ],
        login: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ]
      },
      id: this.$store.state.user.id,
      currentUserdata: {},
      type: 0,
      tableData: [],
      updateFormType: false,
      dialogupdate: false,
      updateForm: {
        id: '',
        company: '',
        username: '',
        mobile: '',
        position: '',
        email: '',
        is_news_admin: 0,
        login: '',
      },
      dialogResetwrod: false,
      ResetwrodForm: {
        id: '',
        password_old: '',
        password_new: '',
        password_new_two: '',
      },
      optionsAdmin: [
        {
          value: 1,
          label: '是',
        },
        {
          value: 0,
          label: '否',
        },
      ],
    };
  },
  async mounted() {
    this.getuserList(this.id)
    newsinfo({ id: this.id }).then(res => {
      this.currentUserdata = res
    })
  },
  methods: {
    getuserList(id) {
      getuserList({ id: id }).then(res => {
        this.tableData = res.list
        //数组添加第一个
        this.tableData.unshift(res.res)
        this.tableData = this.tableData.map((item, index) => {
          //判断是否禁用
          if (item.state == 1) {
            item.state = true
          } else if (item.state == 0) {
            item.state = false
          }

          //判断权限
          if (item.is_queue == 1) {
            item.is_queue = true
          } else if (item.is_queue == 0) {
            item.is_queue = false
          }

          //判断是否是管理员
          if (index == 0) {
            item.admin = true
          } else {
            item.admin = false
          }

          return item
        })
      })
    },
    addUser() {
      this.updateForm = {
        id: this.id,
        company: '',
        username: '',
        mobile: '',
        position: '',
        email: '',
        is_news_admin: 0,
        login: '',
      },
        this.updateFormType = false
      this.dialogupdate = true
    },
    exitUser(item) {
      // console.log(item);
      this.updateForm.id = item.id
      this.updateForm.company = item.company
      this.updateForm.username = item.username
      this.updateForm.mobile = item.mobile
      this.updateForm.position = item.position
      this.updateForm.email = item.email
      this.updateForm.is_news_admin = item.is_news_admin
      this.updateForm.login = item.login
      this.updateFormType = true
      this.dialogupdate = true
    },
    updateUserInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.updateFormType) {
            updateUserInfo(this.updateForm).then(res => {
              // console.log(res)
              this.dialogupdate = false
              this.getuserList(this.id)
              this.$message({
                message: '修改成功',
                type: 'success'
              });
            }).catch(err => {
              this.$message.error(err.message)
            })
          } else {
            createUser(this.updateForm).then(res => {
              // console.log(res)
              this.dialogupdate = false
              this.getuserList(this.id)
              this.$message({
                message: '创建成功',
                type: 'success'
              });
            }).catch(err => {
              this.$message.error(err.message)
            })
          }
        } else {
          return false;
        }
      });

    },
    passUser(id) {
      this.dialogResetwrod = true
      this.ResetwrodForm.id = id
    },
    passWord() {
      passWord(this.ResetwrodForm).then(res => {
        this.dialogResetwrod = false
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    updataState(id) {
      userState({ id: id }).then(res => {
        this.getuserList(this.id)
      })
    },
    updataQueue(id) {
      queuestate({ id: id }).then(res => {
        this.getuserList(this.id)
      })
    },
    passwordClose() {
      this.ResetwrodForm = {
        id: '',
        password_old: '',
        password_new: '',
        password_new_two: '',
      }
      this.dialogResetwrod = false
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
      this.dialogupdate = false
    }
  },
};
</script>

<style scoped lang="less">
.el-main {
  margin: 30px 15px;
}
.password_span {
  color:red;
  font-size: 12px;
  position: absolute;
  right: 0;
  top: 80%;
}
</style>
